/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import { Form, Input, DatePicker, Select, InputNumber,  Button ,Tooltip,Icon,Popover } from 'antd';
import {connect} from 'dva';
import moment from 'moment'
import request from '@/utils/request';
const FormItem = Form.Item;
const Option = Select.Option;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      all_vendors:[],
      all_protocols:[]
    };
  }
  componentDidMount() {
    const that=this;
    request(`/all_vendors`, {
      method: 'GET',
    }).then((response)=> {
      if(response.status===200){
        that.setState({
          all_vendors:response.data.data
        })
      }
    })

    request(`/all_protocols`, {
      method: 'GET',
    }).then((response)=> {
      if(response.status===200){
        that.setState({
          all_protocols:response.data.data
        })
      }
    })
  }
  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 9},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 15},
      }
    };

    const formItemLayoutWithLabel2 = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 4},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 20},
      }
    };

    const {getFieldDecorator} = this.props.form;
    return (
      <div>
        <Form onSubmit={this.handleSubmit}>
          <FormItem
            style={{width:'50%',display:'inline-block'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               水表号
            </span>
            )}
          >
            {getFieldDecorator('number', {
              initialValue: this.props.editRecord ? this.props.editRecord.number : '',
              rules: [{ required: true, message: '请输入水表号' }],
            })(
              <Input />
            )}
          </FormItem>
          <FormItem
            style={{width:'50%',display:'inline-block'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               IMEI
            </span>
            )}
          >
            {getFieldDecorator('imei', {
              initialValue: this.props.editRecord ? this.props.editRecord.imei: '',
            })(
              <Input disabled={Boolean(this.props.editRecord)}/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayoutWithLabel2}
            label={(
              <span>
              协议
               {/* <Popover content={<div>
                  <p><span style={{fontWeight:'bold'}}>049xxxxx </span>: 珠华-OneNET-阀控</p>
                  <p><span style={{fontWeight:'bold'}}>077xxxxx </span>: 珠华-OneNET-阀控</p>
                  <p><span style={{fontWeight:'bold'}}>111100160xxxxx </span>: 株洲珠华-WH-OneNET-阀控</p>
                  <p><span style={{fontWeight:'bold'}}>000020xxxxxxxxxx </span>: 株洲珠华-TY-OneNET-阀控</p>
                  <p><span style={{fontWeight:'bold'}}>6101xxxxxxxxxx </span>: 西安旌旗-OneNET-阀控</p>
                  <p><span style={{fontWeight:'bold'}}>200xxxxx </span>: 泰安-NB-阀控</p>
                  <p><span style={{fontWeight:'bold'}}>200xxxxxxxxx </span>: 泰安-NB-阀控</p>
                  <p><span style={{fontWeight:'bold'}}>121xxxxxxxxx </span>: 泰安-NB-阀控</p>
                  <p></p>
                </div>} title="协议分类">
                <Icon type="question-circle-o" />
                </Popover>*/}
            </span>
            )}>
            {getFieldDecorator('protocol_id', {
              initialValue: this.props.editRecord?this.props.editRecord.protocol_id:"",
              rules: [{required: true, message:'协议不能为空'}],
            })(
              <Select   disabled={Boolean(this.props.editRecord)}>
                { this.state.all_protocols.map((item, key) => {
                  return (
                    <Option key={item.id}  value={item.id.toString()}>{item.name}</Option>
                  )
                }) }
              </Select>
            )}
          </FormItem>
          <FormItem
            style={{width:'50%',display:'inline-block'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               初始值
            </span>
            )}
          >
            {getFieldDecorator('initial_value', {
              initialValue: this.props.editRecord ? this.props.editRecord.initial_value: 0,
            })(
              <InputNumber  disabled={Boolean(this.props.editRecord)} style={{width:'100%'}} min={0}/>
            )}
          </FormItem>
          <FormItem
            style={{width:'50%',display:'inline-block'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               地址
            </span>
            )}
          >
            {getFieldDecorator('address', {
              initialValue: this.props.editRecord ? this.props.editRecord.address: '',
            })(
              <Input />
            )}
          </FormItem>
          <FormItem
            style={{width:'50%',display:'inline-block'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               水表口径
            </span>
            )}
          >
            {getFieldDecorator('caliber', {
              initialValue: this.props.editRecord ? this.props.editRecord.caliber: '未知',
            })(
              <Select  style={{width:'100%'}}>
                {[{key:'未知',value:'未知'},
                  {key:'DN15',value:'DN15'},
                  {key:'DN20',value:'DN20'},
                  {key:'DN25',value:'DN25'},
                  {key:'DN32',value:'DN32'},
                  {key:'DN40',value:'DN40'},
                  {key:'DN50',value:'DN50'},
                  {key:'DN65',value:'DN65'},
                  {key:'DN80',value:'DN80'},
                  {key:'DN100',value:'DN100'},
                  {key:'DN150',value:'DN150'},
                  {key:'DN200',value:'DN200'},
                  {key:'DN300',value:'DN300'},
                ].map(function(item,index) {
                  return <Option key={index} value={item.key}>
                    {item.value}
                  </Option>
                })}
              </Select>
            )}
          </FormItem>
          <FormItem
            style={{width:'50%',display:'inline-block'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               是否阀控
            </span>
            )}
          >
            {getFieldDecorator('is_valve', {
              initialValue: (this.props.editRecord&&this.props.editRecord.is_valve) ? this.props.editRecord.is_valve.toString(): '1',
              rules: [{ required: true, message: '请输入水表号' }],
            })(
              <Select  style={{width:'100%'}}>
                {[{key:'-1',value:'无阀控'},
                  {key:'1',value:'有阀控'},
                ].map(function(item,index) {
                  return <Option key={index} value={item.key}>
                    {item.value}
                  </Option>
                })}
              </Select>
            )}
          </FormItem>
          <FormItem
            style={{width:'50%',display:'inline-block'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               铅封号
            </span>
            )}
          >
            {getFieldDecorator('seal_number', {
              initialValue: this.props.editRecord ? this.props.editRecord.seal_number: '',
            })(
              <Input />
            )}
          </FormItem>
          <FormItem
            style={{width:'50%',display:'inline-block'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               安装日期
            </span>
            )}
          >
            {getFieldDecorator('install_date', {
              initialValue: (this.props.editRecord && this.props.editRecord.install_date) ? moment(this.props.editRecord.install_date) : null,
            })(
              <DatePicker style={{width:'100%'}} allowClear={false}/>
            )}
          </FormItem>
          <FormItem
            style={{width:'50%',display:'inline-block'}}
            {...formItemLayoutWithLabel}
            label={(
              <span>
               备注
            </span>
            )}
          >
            {getFieldDecorator('remark', {
              initialValue: this.props.editRecord ? this.props.editRecord.remark: '',
            })(
              <Input />
            )}
          </FormItem>
        </Form>
        <div
          style={{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
          }}
        >
          <Button onClick={this.props.onClose} style={{ marginRight: 8 }}>
            取消
          </Button>
          <Button onClick={this.props.onSave} type="primary">
            确定
          </Button>
        </div>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


